<template>
  <div>
    <div class="nav" v-if="!$store.state.isLogin" @click="$router.push('/login')">
      <img class="nav-icon" src="../assets/images/usericon.png" alt="" />
      <div class="nav-title">立即登录</div>
    </div>

    <div class="nav" v-else>
      <img class="nav-icon" src="../assets/images/loginuser.jpg" alt="">
      <div class="nav-title">188****8888</div>
    </div>

    <div class="my-order-tab">
      <van-grid :gutter="20">
        <van-grid-item icon="coupon-o" text="电影订单" />
        <van-grid-item icon="orders-o" text="商品订单" />
      </van-grid>
    </div>

    <div class="margin-set">
    <van-cell-group>
  <van-cell title="卖座卷" icon="credit-pay" is-link />
</van-cell-group>
    </div>
    
    <div class="margin-set">
    <van-cell-group>
  <van-cell title="组合红包" icon="credit-pay" is-link />
</van-cell-group>
    </div>

    <div class="margin-set">
    <van-cell-group>
  <van-cell title="余额" icon="credit-pay" is-link />
</van-cell-group>
    </div>

    <div class="margin-set">
    <van-cell-group>
  <van-cell title="设置" icon="credit-pay" is-link />
</van-cell-group>
    </div>

    <div class="margin-set" v-if="$store.state.isLogin" @click="outLogin">
      <span class="label">退出登录</span>
      <img class="arrow" src="../assets/images/arrowright.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: "Center",
  methods:{
      outLogin(){
          this.$dialog.confirm({
              title:'退出账号确认',
              message:'您是否想要退出当前账号？',
              confirmButtonColor: '#ff5f16'
          }).then(()=>{
              this.$store.commit('changeLogin',false)
              this.$toast('退出成功')
              this.$router.go(0)
          }).catch(err => err)
      }
  }
};
</script>
<style scoped>
.box {
  background: #f4f4f4;
}
.nav {
  text-align: center;
  margin-top: -44px;
  height: 200px;
  padding-left: 22px;
  padding-top: 64px;
  background: url(../assets/images/userback.png);
  background-size: cover;
  display: flex;
  align-items: center;
  color: #fff;
  box-sizing: border-box;
}
.nav img {
  width: 63px;
  height: 63px;
  border-radius: 35px;
  margin-right: 20px;
  border: 2px solid #fff;
}
.nav .nav-title {
  font-size: 16px;
}

.my-order-tab{
  align-items: center;
  text-align: center;
  border-bottom: 1px solid #f4f4f4;
  bottom:50px;
}

.margin-set {
  background: #fff;
  padding: 0 8px;
  height: 49px;
  border-bottom: 1px solid #f4f4f4;
}
</style>
